<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

		<title>Yet Another Monitor</title>
		<meta name="description" content="Internet Usage Statistics" />
		<link rel="stylesheet" type="text/css" href="./reset.css"/>
		<link rel="stylesheet" type="text/css" href="./yamon.css"/>
		<link rel="stylesheet" type="text/css" href="./custom.css"/>
		<!--[if IE]>
			<link rel='stylesheet' type='text/css' href='./msie.css'>
		<![endif]-->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="./yamon.js"></script>
		<script type="text/javascript" src="http://alcaughey.com/YAMon/faq.js"></script>
		<script type="text/javascript" src="./config.js"></script>
		<script type="text/javascript">
			google.load('visualization', '1.0', {'packages': ['corechart']});
		</script>
	</head>
	<body>
	<noscript class='alert'>This web application makes extensive use of JavaScript.  You must either enable JavaScript in your current browswer or upgrade to a JavaScript capable browser.</noscript>
		<div id="wrapper">
			<div id="pageContent" class="leftAlign">
				<div id="PageHeader" >
					<h1>Yet Another Monitor <span id='yamon_version'></span></h1>
					<p id='p-timer'>Refreshing in:&nbsp;<span class="RefreshInterval">120</span> sec.
						<button type="button" id="StartPause">Pause</button>
						<button type="button" id="Reset">Reset</button>
						<button type="button" id="Refresh">Refresh Now</button>
						<br/>
						<a href='/'>Router GUI</a><br/>
					</p>
				</div>
				 <p id='error-notification'>Uh oh... something bad has occurred in the JavaScript... if things were running properly, this text would have been deleted.  Please contact Al and let him know you're experiencing a problem.</p>
				<div id="top-tabs">
					<p class='tabs'>
						<span id='collapse-summary' title='Expand/collapse this section'></span>
						<span id='summary-tab' class='tab-name'>Summary</span>
						<span id='settings-tab' class='tab-name'>Settings</span>
						<span id='changes' class='tab-name'>Changes</span>
						<span id='to-do' class='tab-name'>To Do List</span>
						<span id='credits' class='tab-name'>Credits</span>
						<span id='faq' class='tab-name'>FAQ</span>
						<span id='intro' class='tab-name intro hidden'></span>
					</p>
					<div class='tabs-sections'>
						<div class='intro summary-tab'>
							<h1>Welcome to the `<i>Yet Another Monitor</i>` reports...</h1>
							<p>The good news is that you've gotten to this page so presumably you've gotten everything installed properly.  This is the last step before you can see your bandwidth utilization reports!</p>
							<p>You have to now confirm or specify a number of key parameters for the reports - in particular, you must:</p>
							<ol>
								<li>enter the day of the month on which your ISP billing cycle starts.  If you do not have a billing cycle then enter any date that you want.(*)<br/>
								<li>select whether you have unlimited bandwidth or a monthly usage allowance.  If you have a cap, that value must be specified in GB.
								<li>confirm the path to the data files on your web server (*), and
								<li>confirm the name of the users and the usage data files created by the `jamon.sh` script (*).
							</ol>
							<p><b>Note</b> - (*) if these values don't match what you have in your `config.file`, you'll get an error alert when you open or reload the page.  You'll likely also get incorrect results in the reports.</p
							<p>As you can see, there are a variety of other settings but those are all optional.  All of the required fields are prefaced with <span class='required'></span> and those that which need to be confirmed have a green checkmark (<span class='mval'> &#x2714; </span>) following.  Click the checkmark to accept the pre-defined default value or set it to your preferred value (and then click the checkmark).  Once all of the checks have been cleared, the script will automatically reload the page and you'll see the reports.  Return to the `Settings` tab at any time to revise these values.</p>
							<p>Your settings are permanently stored so you'll only have to do this once (yeah!).  However, they are saved using `<a href='http://www.w3schools.com/html/html5_webstorage.asp' target='_blank'>localStorage</a>` - a [relatively] new HTML feature similar to (but more flexible than) `cookies` - that retains this information on *this* computer and in *this* browser only.  This means that if you want to view the reports in a different browser or on a different computer/device, you'll have to confirm your settings there too... sorry, but that's the way `localStorage` works.  I added the `Export Settings` and `Import Settings` buttons to provide a functional (but not exactly pretty) way to synchronize your settings between devices. </p>
							<h2>Default Settings:</h2>
						</div>
						<div id="summary-tab-section" class="summary-tab leftAlign">
							<div class='main-section'>
								<div class='data-table'>
									<div id='changes-legend' class='a-l cf'>
										<p><b><u>Changes Legend</u></b>:</p>
										<p class='changed c0'>bytes</p>
										<p class='changed c1'>kilobytes</p>
										<p class='changed c2'>megabytes</p>
										<p class='changed c3'>gigabytes</p>
										<p class='changed c4'>terabytes</p>
										<p class='changed c5'>petabytes</p>
										<p class='changed'>all others</p>
									</div>
									<p>Reporting Interval:&nbsp;<span class='current-interval imp-text'></span></p>
									<p>Reporting Data for:&nbsp;<span class='current-date imp-text'></span></p>
									<p>All Bandwidth is&nbsp;<span id="spBandwidth">still loading...</span>  <span class='change-units'>[ &rarr; <a class='hidden'>MBytes</a> <a class='hidden'>Auto</a> ]</span></p>
									<p>Internet Usage Cap:&nbsp;<span id="spUsageCap" class='imp-text'>Not Set... see 'Settings' tab</span></p>
									<p>ISP Billing Reset Date:&nbsp;<span id="spResetDay" class='reset_day imp-text'>???</span>&nbsp;of every month
									</p>
									<table class='cf' id="SystemTotalsTable">
										<thead>
											<tr>
												<th class='br'>Interval</th><th>Downloads</th><th class='br'>Uploads</th><th class='br'>Total</th><th class='is-cap br'>Cap</th><th class='is-cap br2'>% of Cap</th><th class='is-cap a-c'>Projected<br/>Total</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
									<span id="add-history" title="Add another interval">+</span>
								</div>
								<div id="UsageGraph" class="graphs"></div>
							</div>
						</div>
						<div id="settings-tab-section" class="summary-tab">
							<h3>You must specify and/or confirm the value for all <span class=' required'> required</span> fields.  The others are optional (or you can accept the defaults).</h3>
								<div id='settings-columns'>
									<div id='settings-col_1'>
										<p id='p-reset_day'>
											<label for='reset_day' title='The day of the month on which your ISP bill starts' class='required'>ISP Billing Date</label>:<input type='number' pattern='^[1-9]|1-2][0-9]|3[0-1]$' id='reset_day' name='reset_day' size=3 class='linked'> of the month
										</p>
										<p id='p-bw_cap'>
											<label title='What your ISP allows you to use each month (in GB)' class='required'>Bandwidth</label>: <label for='bandwidth-u'><input type=radio id='bandwidth-u' name="bandwidth" value="unlimited">Unlimited</label>
											<input type=radio id='bandwidth-l' name="bandwidth" value="limited"><input type='number' pattern='^[0-9]{1,3}$' id='bw_cap' name='bw_cap' class='a-r' size=4> GB/mo
										</p>
										<p>
											<label for="DisplayUnits">Display Units:</label>
											<select name="DisplayUnits" id="DisplayUnits">
												<option value="auto">Automatic</option>
												<option value="0">Bytes</option>
												<option value="1">Kilobytes</option>
												<option value="2">Megabytes</option>
												<option value="3">Gigabytes</option>
												<option value="4">Terabytes</option>
												<option value="5">Petabytes</option>
											</select>
										</p>
										<p>
											<label for="DisplayBase">Display Base:</label>
											<select name="DisplayBase" id="DisplayBase">
												<option value="1000">1000</option>
												<option value="1024">1024</option>
											</select>
										</p>
									   <p>
											<label for="NumDecimals"># Decimals:</label>
											<select name="NumDecimals" id="NumDecimals">
												<option value="0">0</option>
												<option value="1">1</option>
												<option value="2">2</option>
											</select>
										</p>
										<p>
											<input type="checkbox" id="ShowZeroes">
											<label for="ShowZeroes">Show Zero Bandwidth</label>
										</p>
										<p>
											<input type="checkbox" id="ShowDevices" checked />
											<label for="ShowDevices">Show Devices</label>
											<br />
										</p>
										<p class='isUL new'>
											<label title=''>Reduce totals by Unlimited usage</label>: <br/>
											<label for='ul-redtot-y'><input type=radio id='ul-redtot-y' name="ul-redtot" value="1" checked> Yes</label> &nbsp;
											<label for='ul-redtot-n'><input type=radio id='ul-redtot-n' name="ul-redtot" value="0"> No</label>
										</p>
									</div>
									<div id='settings-col_2'>
										<p id='p-dataPath'>
											<label for="dataPath" class='required'>Path to Data</label>:
											<input type="text" name="dataPath" id="dataPath" size='12' value="./data"/>
										</p>
										<p id='p-devicefile'>
											<label for="devicefile" class='required'>Users & Devices</label>:
											<input type="text" name="devicefile" id="devicefile" size='12' value="users.html"/>
										</p>
										<p id='p-usagefile'>
											<label for="usagefile" class='required'>Usage</label>:
											<input type="text" name="usagefile" id="usagefile" size='12' value="mac_data.html"/>
										</p>
										<p>
											<input type="checkbox" id="showHourly">
											<label for="showHourly" checked>Show Hourly Graph</label>
										</p>
										 <p class='showHourly indent-17 hidden'>
											<label for="hourFileName" title='Name of your hourly data file (as entered in `config.file`)'>File name:</label>
											<input type="text" name="hourFileName" id="hourFileName" class='' size='15' value="hourly_data.html" placeholder="Hourly data file name"/>
										</p>
										<p class=''>
											<input type="checkbox" id="showLive">
											<label for="showLive" checked>Show Live Updates</label>
										</p>
										 <p class='showLive indent-17 hidden'>
											<label for="liveFileName" title='Name of your live data file (as entered in `config.file`)'>File name:</label>
											<input type="text" name="liveFileName" id="liveFileName" class='' size='15' value="live_data.html" placeholder="Live data file name"/>
										</p>
										<p class='showLive indent-17 hidden'>
											<label title=''>Only if tab is open</label>: 
											<label for='onlyUpdate-y'><input type=radio id='onlyUpdate-y' name="onlyUpdate" value="1"> Yes</label> &nbsp;
											<label for='onlyUpdate-n'><input type=radio id='onlyUpdate-n' name="onlyUpdate" value="0"> No</label>
										</p>
										<p class='showLive indent-17 hidden'>
											<label for="hmUpdateRows">Rows in table:</label>
											<input type="number" pattern='^[1-9][0-9]*$' size="4" name="hmUpdateRows" id="hmUpdateRows" value="15"/>
										</p>
									</div>
									<div id='settings-col_3'>
										<p>
											<input type="checkbox" id="showISP">
											<label for="showISP" checked>Show ISP Columns</label>
										</p>
										 <p class='showISP indent-17'>
											<label for="isp-name" title='Name of your ISP (e.g., Rogers, Verizon)... for display only'>ISP Name:</label>
											<input type="text" name="isp-name" id="isp-name" class='linked' size='9' value="" placeholder="ISP Name"/>
										</p>
										 <p class='showISP indent-17'>
											<label for="isp-name" title='URL to ISP usage report'>ISP usage report:</label>
											<input type="url" name="isp-url" id="isp-url" class='linkedURL' size='20' value="" placeholder="URL to report"/>
										</p>
										<p class='showISP indent-17'><a class='isp-url' href='' target='_blank'>Link</a></p>
										<p>
											<label for="RefreshInterval">Refresh Interval:</label>
											<input type="number" pattern='^[1-9][0-9]*$' size="4" name="Refresh" id="RefreshInterval" class='linked' value="120"/> sec.
										</p>
								   </div>
									<div id='settings-col_4'>
									<!-- a place holder for additional settings or a re-org -->
								   </div>
							   </div>
							   <p class='a-c'>
								   <button onclick="settings('export')">Export Settings</button>
								   <button onclick="settings('import')">Import Settings</button>
								   <button onclick="settings('reset')">Reset Settings</button>
							   </p>
							<h3 class='hidden' id='missing-txt'></h3>
						</div>
						<div id="changes-section" class="summary-tab">
							test
						</div>
						<div id="to-do-section" class="summary-tab">
							<ul>
								<li>add `live` stats (updated every 10 sec or so)... probably a table and perhaps a chart. This'll require changes to the yamon.sh script (to dump data every time it updates things)... presumably there'll have to be a flag in the config.file to turn this feature on/off.  I wonder how much additional load this'll add to the router CPU.
								<li>modify the web code so that you do not have to edit users.file when a new device is added to your network - i.e., the users.file (or users.html on the web server) will contain the MAC address and based upon that (or a hashcode of the MAC), lookup the friendly name for the user & device.  Retaining the user/device info in localStorage will be pretty simple to implement solution
								<li>add a last hour report - i.e., a rolling report for the past 60 minutes (in 5min intervals) showing uploads/downloads by user/device.  Again probably a table and chart
								<li>set this up as a google code project to improve version control
							</ul>
							<p>If you have any questions/suggestions or find an error, drop me a <a href="mailto:al.caughey@gmail.com?subject=Yet Another Monitor Questions%2FComments">line</a>.  I'll do my best to respond ASAP!</p>
						</div>
						<div id="credits-section" class="summary-tab">
							<p>By: Al Caughey </p>
							<p>Version: Jul 4 2013</p>
							<p>Based upon: <a href='http://code.google.com/p/wrtbwmon/' target='_blank'>wrtbwmon</a> by Emmanuel Brucy &  <a href='http://code.google.com/p/lal-projects/' target='_blank'>bw_monitor</a> by FezJay<br/>And, adapted from modifications by: `bpsmicro`, `OrionShock` & others</p>
							<p>Thanks to `spanman` and everyone else who's made suggestion for improvements and/or found bugs</p>
							<p>If you have any questions/suggestions or find an error, drop me a <a href="mailto:al.caughey@gmail.com?subject=Yet Another Monitor Questions%2FComments">line</a>.  I'll do my best to respond ASAP!</p>
						</div>
						<div id="faq-section" class="summary-tab">
							<p>test</p>
						</div>
					</div>
				</div>
				<div id="SECTION_TWO">
					<p id='data-tabs' class='tabs'>
						<span id='daily-tab' class='tab-name'>Daily Usage</span>
						<span id='live-tab' class='tab-name new'>Live Updates</span>
						<span id='monthly-tab' class='tab-name'>Monthly Totals</span>
						<span id='monthly-breakdown-tab' class='tab-name'>Monthly Breakdown</span>
						<span id='devices-tab' class='tab-name'>Devices</span>
					</p>
					<div class='tabs-sections'>
						<div id="daily-tab-section" class="summary-tab">
							<header>
								<p>Current Day:&nbsp;
									<button type="button" id="fDBtn" title='Go to the first day of this interval'>|&lt;</button>
									<button type="button" class="pDBtn" title='Go to the previous day in this interval'>&lt;</button>

									<span id='current-date' class='current-date imp-text' title='Data for this data'></span>
									<button type="button" class="nDBtn" title='Go to the next day in this interval'>&gt;</button>
									<button type="button" id="lDBtn" title='Go to the last day of this interval'>&gt;|</button>&nbsp;&nbsp;&nbsp;
									<button type="button" class='go2today hidden' title="Click to return to today's date">Today</button>
								</p>
								<p>Click any name or device in the table below to see the usage breakdown by day.</p>
								<p>Click the `Users / Devices` column heading to show/hide the devices.</p>
								<p class='ishourly'>Click the coloured box to the left of a device name to hide/show that device in the hourly chart below</p>
								<p class='ishourly' id='h_devicedisplay'>Devices in Hourly Graph: 
									<span id='c-h_sd'>
										<span id='h_sd' class='checked' title='Click to hide/show devices in the hourly chart below'></span>
										<span id='h_sd-dd'></span>
										<span id='h_sd-ddl'></span>
									</span>
								</p>
							</header>
							<div class='main-section'>
								<div class='data-table'>
									<table class='cf' id='daily-usage-table'>
										<thead id="DailyUsageHeader">
											<tr>
												<th class='u-d br' rowspan=2>Users / Devices</th><th class='br no-bb' colspan=2>All Day</th><th class='isUL ul-int br no-bb new' colspan=2>Unlimited Interval</th><th class='th-tot br2' rowspan=2>Total</th><th class='br' rowspan=2>Percent</th>
											</tr>
											<tr>
												<th>Downloads</th><th class='br'>Uploads</th><th class='isUL'>Downloads</th><th class='isUL br'>Uploads</th>
											</tr>
											<tr id='no-daily-data' class='hidden'>
												<td colspan=5>There is no data for the selected date!</th>
											</tr>
										</thead>
										<tbody id="DailyData"> </tbody>
										<tfoot>
											<tr id="correction-row" class='hidden'>
												<td class="a-r br"><input type="text" class="cf-desc" placeholder='Reason for correction'></td>
												<td class="cf-d a-r MBytes">
													<input type="text" value="0" name="cf-d">
												</td>
												<td class="cf-u a-r br MBytes">
													<input type="text" value="0" name="cf-u">
												</td>
												<td class=""></td>
												<td class="br"></td>
												<td class="TotalBytes num a-r br2 bytes" value="0">0</td>
												<td class="br a-c percent">-</td>
											</tr>
											<tr id="dailyFooter"></tr>
										</tfoot>
									</table>
									<p id='add-correction'><button onclick='addcorrection()'>Add correction</button>... use this feature if you've accidentally stopped the monitor or if things went haywire.</p>
									<p id='remove-correction' class='hidden'><button onclick='removecorrection()'>Remove correction</button>... click to delete this correction.</p>
								   </div>
								<div id="DailyGraph" class="graphs"></div>
							</div>
							<footer>
							<div id="hourlyGraph" class="showHourly hidden graphs">Hourly Data Graph</div>
							<p id='bnav'>
								<button type="button" id="bpDBtn" class='pDBtn' title='Go to the previous day in this interval'>&lt;</button>
								<button type="button" id="bnDBtn" class='nDBtn' title='Go to the next day in this interval'>&gt;</button>
								<button type="button" class='go2today hidden' title="Click to return to today's date">Today</button>
							<p>
							</footer>
						</div>
						<div id="live-tab-section" class="summary-tab">
							<div id='enable-lu' class='alert'>To see any meaningful information on this tab, you must <br/>
							a) set `_doLiveUpdates=1` in `config.file` on your router, and <br/>
							b) select the `<span class='btn' onclick="$('#showLive').click()">Show Live Updates</span>` checkbox on the `Settings` tab above.</div>
							<p>The data on this tab is aggregated from the `live_data.js` file.  The information will be updated every 10s (or whatever value you have set for `_updatefreq` in your `config.file` on the router).  If you reload this page, the contents of this tab will be lost.</p>
							<div class='main-section'>
								<div class='data-table'>
									<h2>Server load:
									<button type="button" id="luStart" class='hidden'>Start</button>
									<button type="button" id="luStop">Stop</button>
									<button type="button" id="luReset" class='hidden' title='Careful - this will clear all of the data from this table!'>Reset</button></h2><p>Free Memory: <span id='freeMem'></span> bytes</p>
									<p class='p-hr'>
										<span class="td-time br a-r">Time</span><span class="td-num a-c">1-minute</span><span class="td-num a-c">5-minute</span><span class="td-num a-c">15-minute</span>
									</p>
									<div id="liveServer"> </div>
								</div>
								<div id='sl-graph'></div>
							</div>
							<div id='additional-tables'>
                                <div id='current-devices'>
                                    <h2 id='curc'></h2>
                                    <p class='p-cu-hr'>
                                        <span class="td-time br a-r">Time</span><span class="cu-d a-c">Owner</span><span class="cu-o a-c br">Device</span><span class="rs-2 a-c">Downloads<br/><span class="td-num a-c">Total</span><span class="td-num">KB/s</span></span><span class="rs-2 a-c">Uploads<br/><span class="td-num a-c">Total</span><span class="td-num">KB/s</span></span>
                                    </p>
                                    <div id="curr-users"> </div>
                                </div>
                                <div id='active-connections'>
                                    <h2 id='acrc'></h2>
                                    <table id="act-cons"> 
                                        <thead>
                                            <tr>
                                                <th class='br'>Con</th>
                                                <th>Source</th>
                                                <th class='br'>Port</th>
                                                <th>Destination</th>
                                                <th class='br'>Port</th>
                                            </tr>
                                        </thead>
                                        <tbody id='act-cons-body'></tbody>
                                    </table>
                                </div>
							</div>
						</div>
						<div id="monthly-tab-section" class="summary-tab">
							<header>
								<p>Monthly Usage Totals for: <span class='current-interval imp-text'></span></p>
								<p>Click any name or device in the table below to see the usage breakdown by day.</p>
							</header>
							<div class='main-section'>
								<div class='data-table'>
									<table id='monthly-totals-table'>
										<thead id="MonthlyHeader">
											<tr>
												<th class='u-d br' rowspan=2>Users / Devices</th><th class='br no-bb' colspan=2>All Day</th><th class='isUL ul-int br no-bb new' colspan=2>Unlimited Interval</th><th class='th-tot br2' rowspan=2>Total</th><th class='br' rowspan=2>Percent</th>
											</tr>
											<tr>
												<th>Downloads</th><th class='br'>Uploads</th><th class='isUL'>Downloads</th><th class='isUL br'>Uploads</th>
											</tr>
										</thead>
										<tbody id="MonthlyData"></tbody>
										<tfoot>
											<tr id="mcorrection-row" class='hidden is_d'>
												<td class="a-r br">Corrections</td>
												<td class="cfv downloads num a-r">
												</td>
												<td class="cfv uploads num a-r br">
												</td>
												<td class=""></td>
												<td class="br"></td>
												<td class="TotalBytes br2 num a-r"></td>
												<td class="br a-c percent">-</td>
											</tr>
											<tr id="monthlyFooter"></tr>
										</tfoot>
									</table>
								</div>
								<div class="graphs">
                                    <div id="MonthlyGraph"></div>
                                    <div id="UnlimitedGraph" class="isUL"></div>
                                </div>
							</div>
						</div>
						<div id="monthly-breakdown-tab-section" class="summary-tab">
							<p>Monthly Usage Breakdown for: <span class='current-interval imp-text'></span></p>
							<p>Filter data by User or Device:&nbsp;
								<select name="MonthlyBreak" id="mb-filter">
									<option value="ALL" selected>ALL Traffic By Day</option>
								</select>
							</p>
							<p>Click any date in the table below to see the usage breakdown by user/device for that date.</p>
							<table id='monthly-breakdown-table'>
								<thead id="MonthlyBreakdownHeader" class='centerAlign'>
									<tr>
										<th rowspan=3 class='br'>Date</th>
										<th colspan=4 class='br2'>Router (units as indicated)</th>
										<th colspan=6 class='isp br2'><span class='isp-name'></span> (all units in MB) <a class='isp-url' href='' target='_blank'>Link</a></th>
										<th colspan=6 class='is_td br2'>Traff daemon</th>
									</tr>
									<tr>
										<th colspan=4 class='br2'>Details</th>
										<th colspan=4 class='isp br2'>Details</th>
										<th colspan=2 class='isp br2'>Difference</th>
										<th colspan=4 class='is_td br2'>Details</th>
										<th colspan=2 class='is_td br2'>Difference</th>
									</tr>
									<tr>
										<th>Down</th>
										<th class='br'>Up</th>
										<th class='br2'>Total</th>
										<th class='br2'>Agg.</th>
										<th class='isp'>Down</th>
										<th class='isp br'>Up</th>
										<th class='isp br2'>Total</th>
										<th class='isp br2'>Agg.</th>
										<th class='isp br'>Daily</th>
										<th class='isp br2'>Agg.</th>
										<th class='is_td'>Down</th>
										<th class='is_td br'>Up</th>
										<th class='is_td br2'>Total</th>
										<th class='is_td br2'>Agg.</th>
										<th class='is_td br'>Daily</th>
										<th class='is_td br2'>Agg.</th>
									</tr>
								</thead>
								<tbody id="MonthlyBreakdown"></tbody>
								<tfoot id="breakdownFooter"></tfoot>
							</table>
							<h1>Graphs &rarr; <span id='graphsfor'></span>  [ <img id='rld-mbd-g' src='images/refresh.png' onclick="drawGraphs()" title='Re-draw the graphs'> ]</h1>
							<p class='a-c'><a id='all-graphs'>All</a> <a id='no-graphs'>None</a> 
								<label for='cb-down'><input type='checkbox' id='cb-down' class='gr-cb' checked>Downloads</label>
								<label for='cb-up'><input type='checkbox' id='cb-up' class='gr-cb' checked>Uploads</label>
								<label for='cb-tot'><input type='checkbox' id='cb-tot' class='gr-cb' checked>Totals</label>
								<label for='cb-cum'><input type='checkbox' id='cb-cum' class='gr-cb' checked>Cumulative </label>
								<label for='cb-dif' class='gr-nall'><input type='checkbox' id='cb-dif' class='gr-cb' checked>Differences</label>
								<label for='cb-difp' class='gr-nall'><input type='checkbox' id='cb-difp' class='gr-cb' checked>Differences (in %)</label>
								<label for='cb-cdif' class='gr-nall'><input type='checkbox' id='cb-cdif' class='gr-cb' checked>Cumulative Difference</label>
								<label for='cb-cdifp' class='gr-nall'><input type='checkbox' id='cb-cdifp' class='gr-cb' checked>Cumulative Difference (in %)</label>
							</p>
							<div id='mbd-graphs'>
								<div id="gr-cb-down" class="graphs"></div>
								<div id="gr-cb-up" class="graphs"></div>
								<div id="gr-cb-tot" class="graphs"></div>
								<div id="gr-cb-cum" class="graphs"></div>
								<div id="gr-cb-dif" class="graphs"></div>
								<div id="gr-cb-difp" class="graphs"></div>
								<div id="gr-cb-cdif" class="graphs"></div>
								<div id="gr-cb-cdifp" class="graphs"></div>
							</div>
						</div>
						<div id="devices-tab-section" class="summary-tab">
							<p>Users &amp; Devices for: <span class='current-interval imp-text'></span></p>
							 <table id='devices-table'>
								<thead id="devicesHeader" class='centerAlign'>
									<tr>
										<th>User</th><th>Device Name</th><th>IP Address</th><th>Mac Address</th><th class='br2'>Total</th><th class='br'>Percent</th>
									</tr>
								</thead>
								<tbody id="devicesData"></tbody>
							</table>
						</div>
					</div>
				</div>
				<div class='loading hidden'><h1>Loading view...</h1></div>
				<p class='footer'>Enjoy!</p>
			</div>
		</div>
	</body>
</html>